<template>
  <el-card style="max-width: 90%; margin: 0 auto">
    <template #header>
      <div class="card-header">
        <span style="font-size: 12px">查询条件</span>
      </div>
    </template>
    <el-form-item label="产品名称：">
      <el-input v-model="rolename" type="text" />
      <el-button @click="initTableData">查询</el-button>
    </el-form-item>
  </el-card>

  <br />
  <br />
  <!-- 小图标 -->
  <div class="mb-4 button-container" style="max-width: 90%; margin: 0 auto">
    <el-button :icon="Refresh" />
    <el-button :icon="Grid" />
  </div>
  <br />
  <!-- 表格 -->
  <div style="max-width: 90%; margin: 0 auto">
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="产品" width="150" />
      <el-table-column prop="number" label="数量" width="120" />
      <el-table-column prop="price" label="单价" width="120" />
      <el-table-column prop="createdate" label="申请时间" width="200" />
      <el-table-column prop="status" label="状态" width="120" />
      <el-table-column prop="" label="操作"
        ><template #default="{ row }">
          <el-button
            link
            type="primary"
            size="small"
            @click="confirmDelete(row)"
            >撤销</el-button
          >
          <span v-if="row.flag">
            <el-button
              link
              type="primary"
              size="small"
              @click="openEditDialog(row)"
              >修改</el-button
            >
            <!-- 查看原因弹窗 -->
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="row.reason"
              placement="left"
              v-if="row.flag1"
            >
              <el-button link type="primary" size="small">查看原因</el-button>
            </el-tooltip>
            <!-- 结束 -->
          </span>
        </template></el-table-column
      >
    </el-table>
    <br />
    <!-- 分页 -->
    <div class="pagination-container">
      显示第{{ start + 1 }}到第{{ start + tableData.length }}条记录，总共{{
        Counttotal
      }}条记录
      <el-pagination
        size="small"
        layout="prev, pager, next"
        :total="Counttotal"
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <!-- 修改组件 -->
  <Edit
    v-model:editFormVisible="editFormVisible"
    :editFormData="selectedRow"
    @refreshTable="initTableData"
  />
  <!-- 删除组件 -->
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>确定删除吗</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        &nbsp;
        <el-button type="primary" @click="deleteClick">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Plus, Right, Minus, Grid, Refresh } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { sysStore } from "../../../store/sys.js";
import { format } from "date-fns";
import http from "../../../util/http.js";
import Edit from "./components/edit.vue";

//新增属性定义
const addFormVisible = ref(false);
//编辑属性定义
const editFormVisible = ref(false);
const selectedRow = ref(null);
//分页属性定义
const tableData = ref([]);
const Counttotal = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const start = ref(0);
// 关联属性定义

//角色属性定义
const rolename = ref("");
const role = ref({
  id: "",
  name: "",
  flag: "",
});
// 获取登录角色id
const useSysStore = sysStore();
const createrid = useSysStore.id;
// account: useSysStore.account,

// 加载菜单
const initTableData = () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    name: rolename.value,
    id: createrid,
  };

  http
    .post("/aggregation/outboundtable", params)
    .then((res) => {
      let result = res.data;
      Counttotal.value = result.Counttotal;
      start.value = (currentPage.value - 1) * pageSize.value;
      tableData.value = result.rows.map((row) => {
        let statusText;
        let flag;
        let flag1;
        switch (row.status) {
          case 1:
            statusText = "在途";
            flag = false;
            // flag1 = false;
            break;
          case 2:
            statusText = "驳回";
            flag = true;
            // flag1 = false;
            break;
          case 3:
            statusText = "结束";
            flag = true;
            flag1 = true;
            break;
          default:
            statusText = "未知";
        }
        return {
          id: row.id,
          name: row.material.name,
          number: row.number,
          price: row.price,
          createdate: format(new Date(row.createdate), "yyyy-MM-dd HH:mm:ss"),
          status: statusText,
          reason: row.reason,
          flag: flag,
          flag1: flag1,
        };
      });
      console.log(tableData, 111);
    })
    .catch((error) => {
      ElMessage.error("加载数据失败：" + error);
    });
};

// 分页功能
const handleSizeChange = (size) => {
  pageSize.value = size;
  initTableData();
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  initTableData();
};

//修改功能
const openEditDialog = (row) => {
  editFormVisible.value = true;
  selectedRow.value = row;
};

//删除功能
const dialogVisible = ref(false);
const deleteRow = ref(null);
const confirmDelete = (row) => {
  deleteRow.value = row;
  dialogVisible.value = true;
};

const deleteClick = () => {
  http
    .post("/aggregation/deloutbound", { id: deleteRow.value.id })
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("删除成功");
        initTableData();
        dialogVisible.value = false;
      } else {
        ElMessage.error("删除失败");
      }
    });
};

onMounted(() => {
  initTableData();
});
</script>

<style scoped>
:deep .el-form-item__content {
  flex-wrap: nowrap;
}
.el-input {
  margin-right: 10px;
}
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep .el-button + .el-button {
  margin-left: 0px;
}
.button-container {
  display: flex;
  justify-content: flex-end;
}
</style>
